<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>龙屠勇士</title>
	</head>
	<style>
		#bg{
			width: 1300px;
			height: 625px;
			background-image: url(5.png);
		}
		#top{
			width:1300px;
			height: 520px;
		}
		
		.ys{
			width: 142px;
			height: 108px;
			background-image: url(2.jpg);
			font-size: 30px;
			font-family: "黑体";
			color: yellow;
			line-height: 155px;
			text-indent: 95px;
			position: absolute;
		}
		#long{
		   	   height: 520px;
		   	   width: 300px;
		   	   position:absolute;
		   	   left: 10px;
		   	   background-image:url(10.jpg) ;
		   	   opacity: 0.3;
		   	   
		   }
		.bottom {
			height: 100px;
			overflow: hidden;
			position: relative;
		}
		#kaishi{
			width: 65px;
			height: 65px;
			position: absolute;
			left:473px; 
			top: 28px;
			border-radius:50%;
			cursor: pointer;
		

		}
		#zanting{
			width: 65px;
			height: 65px;
			position: absolute ;
			left: 373px;
			top: 28px;
			border-radius: 50%;
			cursor: pointer;		
		}
		#jieshu{width: 65px;
			height: 65px;
			position: absolute ;
			left: 283px;
			top: 28px;
			border-radius: 50%;
			cursor: pointer;		
		}
		#tuichu{
			width: 130px;
			height: 50px;
			position: absolute;
			left: 20px;
			top: 29px;
			cursor: pointer;
		}
		#tongji{width:300px;
				height: 100px;
				position: absolute;
				
		}
		.success{position: absolute;
			font-size: 30px;
			color: red;
		}
		#time{position: absolute;
			top:30px;
			font-size: 30px;
			color: red;
		}
		.sd{position: absolute;
			top:63px;
			font-size: 30px;
			color: red;
		}
		#button{
			width:550px;
			height: 100px;
			position:absolute;
			
		}
		#xb{
			width:996px;
			height:520px;
			position: relative;
			left:302px;
			overflow: hidden;
			
		}
	</style>

	<body>
		<div id="bg">
			<div id="top">
				<div id="long"></div>
				<div id="xb">
					
				</div>
			</div>
			<div class="bottom">
				<div id="button">
					<div id ="kaishi" onclick="ks()"></div>
					<div id ="zanting" onclick="zt()"></div>
					<div id ="tuichu" onclick="tc()"></div>
				    <div id ="jieshu" onclick="js()"></div>
				</div>
		    	<div id="tongji" style="left:700px;">
					<div class="success">正确率:100%</div>
					<div id="time">时间:00:00:00</div>
					<div class="sd">速度:0个/分钟</div>
           		</div>
		   </div>
		    
        </div>
	</body>
    <script type="text/javascript">
		var nz1=0;
		var nz2 = 0;
		var nz3 = 0;
		var nz4 = 0;
		var time=0;
		var sum=0;
		var count=0;
		var n=0;
		function js() {
			zt();
			var divtop = document.querySelector("#xb");
			divtop.innerHTML = "";
			time = 0;
			document.querySelector("#time").innerHTML = "时间: 00:00:00";	
			var div_success = document.querySelector(".success");
			div_success.innerHTML="正确率:100%";
			var speed = document.querySelector(".sd");
			speed.innerHTML="速度:0个/分钟";
			n=0;
			sum=0;
			count=0;
		}
		function tc(){
			close()
		}
		function zt(){
			clearInterval(nz1);
			clearInterval(nz2);
			clearInterval(nz3);
			clearInterval(nz4);
			nz1=0;
			nz3=0;
		}
		window.onkeydown=function(event){
				if(nz1!=0){
					var div_top = document.querySelector("#xb");
					for (var i =0; i<div_top.children.length;i++){
						var k = div_top.children[i].getAttribute("key");
						if(k == event.keyCode){
							div_top.removeChild(div_top.children[i]);
							n++;
							break;
						}
						
					}
					
				}
				
			}
		function ks(){
				if(nz1==0){
					nz1=setInterval(function(){
						var xb = document.querySelector("#xb");
						for(var i=0; i< xb.children.length;i++){
							var t = parseInt(xb.children[i].style.right);
							xb.children[i].style.right=t+parseInt(xb.children[i].getAttribute("sudu"))+"px";
							var temp = parseInt(xb.children[i].style.right)
							if (temp > 1000){
								count++;
								xb.removeChild(xb.children[i]);	
							}
							var success = document.querySelector(".success");
							var rate = parseInt((1-count/sum)*100);
							if(isNaN(rate)){
								rate = 100;
							}
							success.innerHTML="正确率:" + rate + "%";
						}
					},100);
					
						nz2=setInterval(function(){
						var div=document.createElement("div");
						div.className="ys";
						div.style.top=parseInt(Math.random()*410)+"px";
						div.style.right="-140px";
						var ch = parseInt(Math.random()*26+65);
						div.setAttribute("key",ch);
						div.setAttribute("sudu",parseInt(Math.random()*10)+5);
						div.innerHTML = "&#" + ch + ";";
						document.querySelector("#xb").appendChild(div);
						sum++;
					},1000);
					
					nz3=setInterval(function(){
						time++;
						var ss = parseInt(time % 60);
						ss = ss < 10 ? "0" + ss : ss;
						var mm = parseInt( time / 60 %60);
						mm = mm < 10 ? "0" + mm : mm;
						var hh = parseInt(time / 3600);
						hh = hh < 10 ? "0" + hh : hh;
						var time_string =document.querySelector("#time");
						time_string.innerHTML="时间:" +　hh + ":" + mm + ":" + ss;
					},1000);
					
					nz4=setInterval(function(){
						var speed = document.querySelector(".sd");
						speed.innerHTML="速度:" + parseInt(60*n/time) + "个/分钟";
						
					},1000);
				}
		}
	</script>

</html>